<template>
  <ul ref="pickerList" :data-update="update">
    <li v-for="(data, index) in datas" :key="index" :class="index === 2 ? 'active': ''">{{data}}</li>
  </ul>
</template>
<script>
  import touchable from './touchScroll.js'
  import {getTranslate, setTranslate} from './translate.js'
  export default {
    name: 'Picker',
    props: {
      datas: Array,
      update: Boolean
    },
    data () {
      return {
        touching: false,
        itemHeight: 0,
        pickedIndex: 2,
        children: null,
        childrenLen: 0
      }
    },
    methods: {
      // 计算滑动区间
      getTouchRange () {
        let { pickerList } = this.$refs
        return {
          min: -1 * this.getOptionHeight() * (pickerList.children.length - 3),
          max: this.getOptionHeight() * 2
        }
      },
      // 计算每个option的高度
      getOptionHeight () {
        if (this.itemHeight) return this.itemHeight
        let { pickerList } = this.$refs
        this.itemHeight = pickerList.children[0].offsetHeight
        return this.itemHeight
      },
      // 初始化
      touchInit () {
        let picker = this.$refs.pickerList
        let prevTranslateY
        let children = this.children = picker.getElementsByTagName('li')
        let childrenLen = this.childrenLen = children.length
        touchable(picker, {
          effectEl: picker,
          onTouchStart: ({ translateY }, event) => {
            event.preventDefault()
            prevTranslateY = translateY
          },
          onTouchMove: ({touching, effectEl, translateY}, event) => {
            event.preventDefault()
            this.touching = touching
            let maxTranslateY = this.getOptionHeight() * 3
            let currentTranslateY = translateY
            let pickerHeight = childrenLen * this.getOptionHeight()
            if (translateY > 0) {
              let rate = (maxTranslateY - translateY) / maxTranslateY
              rate = rate >= 0 ? rate : 0.1
              currentTranslateY = prevTranslateY + rate * (translateY - prevTranslateY)
            } else if (translateY < -pickerHeight) {
              let rate = ((translateY - pickerHeight) - maxTranslateY) / maxTranslateY
              rate = rate >= 0 ? rate : 0.1
              currentTranslateY = prevTranslateY + rate * (translateY - prevTranslateY)
            }
            prevTranslateY = currentTranslateY
            setTranslate(effectEl, null, currentTranslateY, false)
            this.setPickedIndex(currentTranslateY)
          },
          onTouchEnd: ({touching, startTimestamp, velocityTranslateY}, event) => {
            event.preventDefault()
            this.touching = touching
            let momentumRatio = 10
            let itemHeight = this.getOptionHeight()
            let translateY = getTranslate(picker).y
            let duration = new Date() - startTimestamp
            let momentumTranslate
            if (duration < 300) {
              momentumTranslate = translateY + (velocityTranslateY * momentumRatio)
            }
            this.$nextTick(() => {
              let translate
              let touchRange = this.getTouchRange()
              if (momentumTranslate) {
                translate = Math.round(momentumTranslate / itemHeight) * itemHeight
              } else {
                translate = Math.round(translateY / itemHeight) * itemHeight
              }
              translate = Math.max(Math.min(translate, touchRange.max), touchRange.min)
              setTranslate(picker, null, translate, true)
              this.setPickedIndex(translate)
            })
          }
        })
      },
      // 设置当前选中的状态
      setPickedIndex (y) {
        let height = this.getOptionHeight()
        let max = this.childrenLen - 1
        let currentIndex = y > 0 ? Math.ceil(-y / height) + 2 : Math.floor(-y / height) + 2
        currentIndex = currentIndex > max ? max : currentIndex < 0 ? 0 : currentIndex
        if (this.pickedIndex !== -1) {
          this.children[this.pickedIndex].classList.remove('active')
        }
        this.children[currentIndex].classList.add('active')
        this.pickedIndex = currentIndex
      },
      // 获取当前选中的值
      getPcikedValue () {
        return this.children[this.pickedIndex].innerText
      }
    },
    updated () {
      this.touchInit()
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  ul{
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    transition: all .3s ease-out;
    li{
      height: 40px;
      line-height: 40px;
      font-size: rem(28);
      color: #999;
    }
    .active{
      font-size: rem(32);
      color: #333;
      font-weight: 700;
    }
  }
</style>

